/* context: .rmoves */
@include breakpoint($mq-col1) {
  overflow: hidden;

  .col1-moves {
    flex: 0 0 $col1-moves-height;
    display: flex;

    .fbt {
      flex: 0 0 auto;
      padding: 0 1.3em;
      opacity: 0.7;
    }

    body.playing.zen & {
      visibility: hidden;
    }
  }

  #{$moves-tag} {
    flex: 1 1 100%;
    display: flex;
    align-items: stretch;
    white-space: nowrap;
    overflow-x: scroll;
    color: $c-font-page;

    @if $theme-light {
      box-shadow: 0 4px 4px c-light($c-bg-page, 78%) inset;
    } @else {
      box-shadow: 0 4px 12px #000 inset;
    }

    &::-webkit-scrollbar {
      height: 0px;
    }

    > :first-child {
      margin-left: auto !important;
    }
  }

  #{$index-tag},
  #{$move-tag},
  .result-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
  }

  #{$index-tag} {
    padding-right: 0.15em;
  }

  #{$move-tag} {
    font-size: 1.1em;
    cursor: pointer;

    &.#{$active-class},
    &:hover {
      @if $theme-light {
        background: hsl($c-site-hue, 20%, 85%);
      } @else {
        background: $c-bg-zebra;
      }
    }

    &.#{$active-class} {
      color: $c-font-clearer;
    }
  }

  .buttons {
    display: none;
  }

  .result {
    margin: 0;
    font-weight: bold;
    font-size: 1.1em;
  }

  .message {
    flex: 0 0 $col1-moves-height;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;

    br {
      display: none;
    }

    strong {
      margin-left: 0.5em;
    }

    &::before {
      margin-right: 0.3em;
    }

    body.playing.zen & {
      display: none;
    }
  }

  .status {
    display: none;
  }
}
